<!-- 首页 -->
<template>
	<view class="home-wrap u-m-b-20">
		<view class="u-p-30">
			<swiper class="screen-swiper" style="height: 180rpx;min-height: 180rpx" :indicator-dots="true"
				:circular="true" :autoplay="true" interval="5000" duration="500">
				<swiper-item style="border-radius:20rpx" v-for="(item, index) in bannerList" :key="index">
					<image :src="item.image" mode="aspectFill"></image>
				</swiper-item>
			</swiper>


			<view class="news-list u-m-t-30">
				<view class="news-item" v-for="item,i in newslist" :key="i"
					@tap="jump('/pages/news/detail', {id: item.id,score:item.score,platform:item.platform})">
					<image v-if="item.thumb" class="image" :src="$IMG_URL+ item.thumb" mode="aspectFill"></image>
					<view class="u-flex u-row-center u-row-between">
						<view class="title">{{ item.title }}</view>
						<view v-if="item.is_top==1">
							<u-icon name="/static/images/jiantou.png" color="#2979ff" size="28"></u-icon>
						</view>
					</view>
					<view class="time">
						{{ item.create_time }}
					</view>
				</view>
			</view>


		</view>
		<!-- 登录提示 -->
		<shopro-auth-modal></shopro-auth-modal>
	</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				isRefresh: true,
				isScorll: false,


				bannerList: [{
					image: 'https://picsum.photos/345/90'
				}],
				newslist: [
					// {
					// 	id: 1,
					// 	title: '数控刀具与普通刀具有什么区别？五金刀具行业数控刀具磨削的“自力更生”',
					// 	istop: true,
					// 	time: '2016-04-09 17:23'
					// },
					// {
					// 	id: 2,
					// 	title: '五金刀具行业数控刀具磨削的“自力更生”',
					// 	istop: false,
					// 	time: '2016-04-09 17:23'
					// },
					// {
					// 	id: 3,
					// 	title: '狮王5060-2重载铣削系列----粗加工之王',
					// 	istop: false,
					// 	time: '2016-04-09 17:23'
					// },
					// {
					// 	id: 4,
					// 	title: '五金刀具行业数控刀具磨削的“自力更生”',
					// 	istop: false,
					// 	time: '2016-04-09 17:23'
					// }
				],
				listParams: {

					page: 1,
					pagesize: 10,
				},
				lastPage: 0,
				isEmpty: '',
			};
		},
		onPullDownRefresh() {
			this.listParams.page = 1
			this.newslist = []

			this.init();
		},
		onLoad() {

		},
		onShow() {
			this.listParams.page = 1
			this.newslist = []
			this.init();
		},
		onPageScroll(e) {
			this.isScorll = e.scrollTop > 100 ? true : false;
		},
		// 触底加载更多
		onReachBottom() {
			if (this.listParams.page < this.lastPage) {
				this.listParams.page += 1;
				this.getTemplate();
			}
		},
		methods: {
			// 获取最新资讯
			init() {
				this.isRefresh = false;
				return Promise.all([this.getTemplate()]).then(() => {
					uni.stopPullDownRefresh();
					this.isRefresh = true;
				});
			},
			// 商品列表
			getTemplate() {
				let that = this;
				that.loadStatus = 'loading';
				that.$http('activity.activity', that.listParams, '加载中...').then(res => {
					if (res.code === 1) {
						that.newslist = [...that.newslist, ...res.data.list];
						that.isEmpty = !that.newslist.length;
						that.lastPage = res.data.total_page;
						that.loadStatus = that.listParams.page < res.data.total_page ? 'loadmore' : 'nomore';
					}
				});
			},
			jump(path, query) {
				let that = this
				if (query.platform == 0) {
					this.$http('activity.needPay', {
						id: query.id
					}).then(res => {
						if (res.code === 1) {
							if (res.data.need_pay == 1) {
								uni.showModal({
									title: '提示',
									confirmText: '确认支付',
									confirmColor: '#e77817',
									content: `为了鼓励技术分享，本次查看将收取您` + `${query.score}` + `积分`,
									success: function(res) {
										if (res.confirm) {
											console.log('用户点击确定');
											that.payScore(path, query)
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								});

							} else {
								this.$Router.push({
									path: path,
									query: query
								});
							}

						}
					});
				} else {
					this.$Router.push({
						path: path,
						query: query
					});
				}



			},
			payScore(path, query) {
				this.$http('activity.payScore', {
					id: query.id
				}).then(res => {
					if (res.code === 1) {
						this.$Router.push({
							path: path,
							query: query
						});

					}
				});
			},
		}
	};
</script>

<style lang="scss">
	.news-list {

		.news-item {
			padding: 20rpx;
			border-radius: 20rpx;
			background-color: #fff;

			&:not(:last-child) {
				margin-bottom: 20rpx;
			}

			.title {
				color: #030D23;
				font-size: 28rpx;
				margin-right: 10rpx;
			}

			.time {
				color: #707070;
				font-size: 24rpx;
				margin-top: 10rpx;
			}
		}
	}
</style>